<template>
  <el-date-picker
    v-model="dateValue"
    class="forminput"
    type="daterange"
    value-format="timestamp"
    format="yyyy-MM-dd"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :disabled="disabled"
  ></el-date-picker>
</template>

<script>
  export default {
    name: 'DateRangeSelect',
    props: {
      startDate: {
        type: Number,
        default: () => {
          return null
        },
      },
      endDate: {
        type: Number,
        default: () => {
          return null
        },
      },
      disabled: {
        type: Boolean,
        default: function () {
          return false
        },
      },
    },
    data: function () {
      const v = []
      if (this.startDate != null) {
        v[0] = this.startDate
        v[1] = this.endDate
      }
      console.log('-----------')
      console.log(this.startDate)
      console.log(this.endDate)
      return {
        dateValue: v,
      }
    },
    watch: {
      dateValue: {
        handler(val, oldVal) {
          if (!val) {
            this.$emit('update:startDate', null)
            this.$emit('update:endDate', null)
            return
          }

          if (val[0] !== undefined) {
            this.$emit('update:startDate', val[0])
          }
          if (val[1] !== undefined) {
            this.$emit('update:endDate', val[1])
          }
        },
        deep: true,
        immediate: true,
      },

      startDate: {
        handler: function (v) {
          var list = Array.from(this.dateValue)
          list[0] = v
          list[1] = list[1]

          if (list[0] == null && list[1] == null) {
            this.dateValue = []
            // console.log('-----------1' + v)
          } else {
            this.dateValue = list
            // console.log('-----------2  ' + v + ' ' + list)
          }
        },
        immediate: true,
      },
      endDate: {
        handler: function (v) {
          var list = Array.from(this.dateValue)
          list[0] = list[0]
          list[1] = v
          if (list[0] == null && list[1] == null) {
            this.dateValue = []
          } else {
            this.dateValue = list
          }
        },
        immediate: true,
      },
    },
  }
</script>

<style scoped></style>
